import React, {FC} from 'react';
import {View, StyleSheet, Text, TouchableOpacity, Image} from 'react-native';
import {
  createBottomTabNavigator,
  BottomTabBarProps,
  BottomTabScreenProps,
} from '@react-navigation/bottom-tabs';
import Home from '../Home';
import Shop from '../Shop';
import Message from '../Message';
import Mine from '../Mine';
import {
  ImagePickerResponse,
  launchImageLibrary,
} from 'react-native-image-picker';

// import icon_tab_home_normal from '../../assets/icon_tab_home_normal.png';
// import icon_tab_home_selected from '../../assets/icon_tab_home_selected.png';

// import icon_tab_shop_normal from '../../assets/icon_tab_shop_normal.png';
// import icon_tab_shop_selected from '../../assets/icon_tab_shop_selected.png';

// import icon_tab_message_normal from '../../assets/icon_tab_message_normal.png';
// import icon_tab_message_selected from '../../assets/icon_tab_message_selected.png';

// import icon_tab_mine_normal from '../../assets/icon_tab_mine_normal.png';
// import icon_tab_mine_selected from '../../assets/icon_tab_mine_selected.png';

import icon_tab_publish from '../../assets/icon_tab_publish.png';

export type RootTabParamList = {
  Home: undefined;
  Shop: undefined;
  Message: undefined;
  Mine: undefined;
  Publish: undefined;
};

export type RootTabScreenProps<Screen extends keyof RootTabParamList> =
  BottomTabScreenProps<RootTabParamList, Screen>;
const BottomTab = createBottomTabNavigator<RootTabParamList>();
type PropsType = {};

// const tabBarIcon = (route: RouteProp<ParamListBase, string>) => {
//   return ({
//     focused,
//     color,
//     size,
//   }: {
//     focused: boolean;
//     color: string;
//     size: number;
//   }) => {
//     let img;
//     switch (route.name) {
//       case 'Home':
//         img = focused ? icon_tab_home_selected : icon_tab_home_normal;
//         break;
//       case 'Shop':
//         img = focused ? icon_tab_shop_selected : icon_tab_shop_normal;
//         break;
//       case 'Message':
//         img = focused ? icon_tab_message_selected : icon_tab_message_normal;
//         break;
//       case 'Mine':
//         img = focused ? icon_tab_mine_selected : icon_tab_mine_normal;
//         break;
//     }
//     return (
//       <Image
//         source={img}
//         style={{width: size, height: size, tintColor: color}}
//       />
//     );
//   };
// };
const RedBookTabBar = ({state, descriptors, navigation}: BottomTabBarProps) => {
  const {routes, index: selectedIndex} = state;

  const onLaunchImageLibraryPress = () => {
    console.log('launchImageLibrary');

    launchImageLibrary(
      {
        mediaType: 'photo',
        quality: 1,
        includeBase64: true,
      },
      (res: ImagePickerResponse) => {
        const {assets} = res;
        if (!assets?.length) {
          console.log('选择图片失败');
          return;
        }
        const {uri, width, height, fileName, fileSize, type} = assets[0];
        console.log(uri, width, height, fileName, fileSize, type);
      },
    );
  };
  return (
    <View style={styles.tabBarContainer}>
      {routes.map((route: any, index: number) => {
        const {options} = descriptors[route.key];
        const label = options.title || '';
        const isFocused = selectedIndex === index;
        if (index === 2) {
          return (
            <TouchableOpacity
              key={label}
              style={styles.tabItem}
              onPress={onLaunchImageLibraryPress}>
              <Image source={icon_tab_publish} style={styles.publishImg} />
            </TouchableOpacity>
          );
        }

        return (
          <TouchableOpacity
            key={label}
            style={styles.tabItem}
            onPress={() => {
              navigation.navigate(route.name);
            }}>
            <Text style={isFocused ? styles.itemTextSelected : styles.itemTxt}>
              {label}
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
};
const MainTab: FC<PropsType> = () => {
  return (
    <View style={styles.root}>
      <BottomTab.Navigator
        initialRouteName="Home"
        // screenOptions={({route}) => {
        //   return {
        //     tabBarIcon: tabBarIcon(route),
        //     tabBarActiveTintColor: '#ff2442',
        //     tabBarInactiveTintColor: '#999',
        //   };
        // }}
        tabBar={RedBookTabBar}>
        <BottomTab.Screen
          name="Home"
          component={Home}
          options={{headerShown: false, title: '首页'}}
        />
        <BottomTab.Screen
          name="Shop"
          component={Shop}
          options={{headerShown: false, title: '购物'}}
        />
        <BottomTab.Screen
          name="Publish"
          component={Shop}
          options={{headerShown: false, title: '发布'}}
        />
        <BottomTab.Screen
          name="Message"
          component={Message}
          options={{headerShown: false, title: '消息'}}
        />
        <BottomTab.Screen
          name="Mine"
          component={Mine}
          options={{headerShown: false, title: '我的'}}
        />
      </BottomTab.Navigator>
    </View>
  );
};

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
    backgroundColor: '#f0f0f0',
  },
  tabBarContainer: {
    width: '100%',
    height: 52,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  tabItem: {
    flex: 1,
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  itemTxt: {
    fontSize: 16,
    color: '#999',
    fontWeight: 'normal',
  },
  itemTextSelected: {
    fontSize: 18,
    color: '#333',
    fontWeight: 'bold',
  },
  publishImg: {
    width: 58,
    height: 42,
    resizeMode: 'contain',
  },
});
export default MainTab;
